<template>
  <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
    <div class="title">{{ infotitle.title }} </div>
    <div class="time">发布时间：{{ infotitle.created_at }}</div>
    <div class="infobox" v-html="infotitle.content"></div>
    <div>
      <div class="footer" v-if="infotitle.attachments.length > 0">
        <div class="table_box">
          <el-table class="table_el" :data="infotitle.attachments" style="width: auto">
            <el-table-column label="相关附件" prop="title" show-overflow-tooltip />
            <el-table-column label="创建时间" prop="created_at" show-overflow-tooltip />
            <el-table-column width="200" label="操作">
              <template #default="scope">
                <el-button size="small" type="primary">
                  <a :href="`${mainUrl}/v1/attachment/get_attachment?aid=${scope.row.attachment_id}`" download>下载</a>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRoute } from 'vue-router';
import { getUserMessage } from '../../api/message';
import { mainUrl } from '@/api/utils';
const route = useRoute();
const infotitle = ref({
  title: '',
  created_at: '',
  content: '',
  attachments: []
})
const infoId = ref()
onMounted(async () => {
  infoId.value = route.query.message_id
  await updata(infoId.value)
})
const updata = async (Id) => {
  let { data } = await getUserMessage(Id)
  if (data.code == 200) {
    infotitle.value = data.data
    console.log(infotitle.value)
  }

}

</script>

<style scoped>
.title {
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.infobox {
  min-height: 150px;
}

.time {
  font-size: 14px;
  font-weight: lighter;
  margin-bottom: 20px;
}
</style>